<style lang="less">
    @import '../../styles/common.less';
    @import 'upload.less';
</style>

<template>
    <div>
    <Form :label-width="100">
           <Card>
             <p slot="title">
            <Icon type="navicon-round"></Icon>
            内容<span>{{pagename}}</span>
        </p>   
        
        <p style="margin:10px 0;">
            <row>
                <i-col span="12">
                <span style="display:inline-block;width:100px;text-align:right;font-size:13px;">内容模式：</span>
                <Radio-group v-model="mode" @on-change="setmode" type="button">
                    <Radio label="PC"></Radio>
                    <Radio label="手机"></Radio>
                </Radio-group>
                </i-col>
                <i-col span="12">
                    <i-button type="primary" style="float:right" @click="save">提交</i-button>
                </i-col>
            </row>
        </p>
        <Row>
            <i-Col span="18"> 
                 <row>
                <i-col span="8">                
                    <Form-item label="所属类别">                
                        <i-Select v-model="model.classid">
                            <Option v-for="item in categorys" :value="item.ID" :key="item.ID">{{item.title}}</Option>
                        </i-Select>
                    </Form-item>
                </i-col>
                <i-col span="8">  
                    <Form-item label="页面属性">     
                   <Checkbox-group v-model="flag" @on-change="checkAllGroupChange">
                            <Checkbox label="n">推荐</Checkbox>
                            <Checkbox label="t">置顶</Checkbox>
                            <Checkbox label="h">热门</Checkbox>
                        </Checkbox-group>
                    </Form-item>
                </i-col>
                <i-col span="8"> 
                    <i-Input v-model="model.pic" placeholder="图片地址" @on-blur="picblur"/>
                </i-col>
            </row>        
                        <FormItem label="文章名称">
                            <i-Input v-model="model.title" icon="android-list" placeholder="文章名称"/>
                        </FormItem>
                        <FormItem label="页面标题" v-show="!ismobile">
                            <i-Input v-model="model.page_title" placeholder="页面标题"/>
                        </FormItem>
                        <FormItem label="手机页面标题" v-show="ismobile">
                            <i-Input v-model="model.mpage_title" placeholder="手机页面标题"/>
                        </FormItem>
                        <FormItem label="页面关键词" v-show="!ismobile">
                            <i-Input v-model="model.page_key" type="textarea" placeholder="页面关键词"></i-Input>
                        </FormItem>
                        <FormItem label="手机页面关键词" v-show="ismobile">
                            <i-Input v-model="model.mpage_key" type="textarea" placeholder="手机页面关键词"></i-Input>
                        </FormItem>
                        <FormItem label="页面描述" v-show="!ismobile">
                            <i-Input v-model="model.page_desc" type="textarea" placeholder="页面描述"></i-Input>
                        </FormItem>
                        <FormItem label="手机页面描述" v-show="ismobile">
                            <i-Input v-model="model.mpage_desc" type="textarea" placeholder="手机页面描述"></i-Input>
                        </FormItem>           
            </i-Col>
            <i-Col span="6" class="padding-left-10">
                
                <!-- <Card>
                    <p slot="title">
                        <Icon type="navicon-round"></Icon>
                        属性
                    </p>
                    <p>
                        <Checkbox-group v-model="flag" @on-change="checkAllGroupChange">
                            <Checkbox label="n">推荐</Checkbox>
                            <Checkbox label="t">置顶</Checkbox>
                            <Checkbox label="h">热门</Checkbox>
                        </Checkbox-group>
                    </p>
                </Card> -->

                <div>
                <Card style="height:300px">
                    <p slot="title">
                        <Icon type="paper-airplane"></Icon>
                        图片
                    </p>
                    <Upload  slot="extra"
                                        ref="upload"
                                        :show-upload-list="false"
                                        :default-file-list="defaultList"
                                        :on-success="handleSuccess"
                                        :format="['jpg','jpeg','png','gif']"
                                        :max-size="2048"
                                        :on-format-error="handleFormatError"
                                        :on-exceeded-size="handleMaxSize"
                                        :before-upload="handleBeforeUpload"
                                        multiple
                                        type="drag"
                                        :action="action"
                                        style="display: inline-block;width:58px;">
                                        <div style="width: 58px;height:28px;line-height: 28px;background:#57A3F3;color:#fff">
                                            <Icon type="camera" size="20"></Icon>上传
                                        </div>
                                    </Upload>
                    <p>
                        <Alert style="padding-right:16px">点图片上左箭头设置封面图（首张）</Alert>
                                    
                                    
                                    <Modal title="查看图片" v-model="visible">
                                        <img :src="imgName" v-if="visible" style="width: 100%">
                                    </Modal>
                                    <div class="admin-upload-list" v-for="item in uploadList" :key="item.uid">
                                            <template v-if="item.status === 'finished'">
                                                <img :src="item.url">
                                                <div class="admin-upload-list-cover">
                                                    <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                                                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                                                    <Icon type="ios-arrow-thin-left" @click.native="handleLeft(item)"></Icon>
                                                </div>
                                            </template>
                                            <template v-else>
                                                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                                            </template>
                                        </div>
                    </p>
                </Card>
                </div>
            </i-Col>
        </Row>
               <row>
                <i-col span="8">
            <Form-item label="点击次数">
                <i-Input type="text" v-model="model.hits" placeholder="点击次数">
                </i-Input>
            </Form-item> 
                </i-col>
                <i-col span="8">
            
            <Form-item label="作者">
                <i-Input type="text" v-model="model.author" placeholder="作者">
                </i-Input>
            </Form-item> 
                </i-col>
                <i-col span="8">
            
            <Form-item label="来源">
                <i-Input type="text" v-model="model.source" placeholder="来源">
                </i-Input>
            </Form-item> 
                </i-col>
            </row>      
            <FormItem label="详细内容" v-show="!ismobile">
                <UEditor id="ueditor" :config="config" ref="content"></UEditor>
            </FormItem>                
            <FormItem label="手机详细内容" v-show="ismobile">
                <UEditor id="ueditor1" :config="config" ref="mcontent"></UEditor>
            </FormItem>
            
            <FormItem style="display:none" label="简介">
                <UEditor id="body" :config="jianconfig" ref="body"></UEditor>
            </FormItem> 
            
            <FormItem style="display:none" label="简参">
                <i-Input type="textarea" v-model="model.jbody">
                </i-Input>
            </FormItem> 
            <row>
                <i-col span="12" style="display:none;">
            <Form-item label="引出链接">
                <i-Input type="text" v-model="model.url" placeholder="引出链接(例如指向淘宝详细页面)">
                </i-Input>
            </Form-item> 
            <Form-item label="页面模版">
                <Select v-model="model.skin" style="width:200px" placeholder="默认不用选择">
                    <Option v-for="item in viewlist" :value="item.skin" :key="item.ID">{{ item.title }}</Option>
                </Select>
            </Form-item> 
                </i-col>
                <i-col span="12">
            <Form-item label="发布时间">
                 <Date-picker type="datetime" v-model="model.addtime" format="yyyy-MM-dd HH:mm:ss" placeholder="发布时间" style="width: 200px"></Date-picker>
            
            </Form-item> 
                </i-col>
                <i-col style="display:none" span="12">
            <Form-item label="最后更新时间">
                 <Date-picker type="datetime" v-model="model.updatetime" format="yyyy-MM-dd HH:mm:ss" placeholder="最后更新时间" style="width: 200px"></Date-picker>
            </Form-item> 
                </i-col>
            </row>
            
            <row style="display:none;">
                <i-col span="22">
            <Form-item label="banner图片">
                <i-Input type="text" v-model="model.bannerpic" placeholder="banner图片(空继承父级分类或系统设置)">
                </i-Input>
            </Form-item> 
                </i-col>
                <i-col span="2" style="text-align:center">
                    <Upload 
                        ref="bannerupload"
                        :show-upload-list="false"
                        :on-success="handlebannerSuccess"
                        :format="['jpg','jpeg','png','gif']"
                        :max-size="2048"
                        :on-format-error="handleFormatError"
                        :on-exceeded-size="handleMaxSize"
                        :action="action">
                    <i-button>上传</i-button>
                    </Upload>
                </i-col>
            </row>
            <Form-item>
                <i-button type="primary" @click="save">提交</i-button>
            </Form-item>
                </Card>
                
    </Form>
    </div>
</template>

<script>
import UEditor from '@/ueditor/ueditor.vue'
import api from '../../libs/api';
export default {
    name: 'content_articleadd',
      components: {UEditor},
    data () {
        return {     
        action:wlfData.serverurl+"/upload/index",       
          config: {
            //可以在此处定义工具栏的内容
            // toolbars: [
            //  ['fullscreen', 'undo', 'redo','|','bold', 'italic', 'underline',
            //  '|','superscript','subscript','|', 'insertorderedlist', 'insertunorderedlist',
            //  '|','fontfamily','fontsize','justifyleft','justifyright','justifycenter','justifyjustify']
            // ],
            autoHeightEnabled: false,
            autoFloatEnabled: true,
            initialContent:'',   //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
            autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
            initialFrameWidth: null,
            initialFrameHeight: 450,
            BaseUrl: '',
            themePath:'/static/ueditor/themes/',
            UEDITOR_HOME_URL: '/static/ueditor/',
            wordCount:false
          },
               
          jianconfig: {
            autoHeightEnabled: false,
            autoFloatEnabled: true,
            initialFrameWidth: null,
            initialFrameHeight: 280,
            BaseUrl: '',
            themePath:'/static/ueditor/themes/',
            UEDITOR_HOME_URL: '/static/ueditor/',
            wordCount:false
          },
            mode:"PC",
            ismobile:false,
            pagename:"添加",
            flag:[],
            model:{pic:'',pics:'',bannerpic:''},
            categorys:[],
            pic:'',
            defaultList:[],
            uploadList: [],
            imgName: '',
            visible: false,
            viewlist:[],
        };
    },
    methods:{
        handleView (file) {
            this.imgName = file.url;
            this.visible = true;
        },
        handleRemove (file) {
            // 从 upload 实例删除数据
            const fileList = this.$refs.upload.fileList;
            this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            this.uploadList = this.$refs.upload.fileList;
        },
        picblur(){
            if(this.model.pic.length>0&&this.pic!=this.model.pic){
                this.uploadList.unshift({name:this.model.pic,url:this.model.pic,uid:new Date().getSeconds()});
            }
        },
        handleLeft(file){
            var fileList = this.$refs.upload.fileList;            
            this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            this.$refs.upload.fileList.unshift(file);            
            this.uploadList = this.$refs.upload.fileList;
            var pics='';
            for(var i in this.uploadList){
                pics+=this.uploadList[i].url+',';
            }
            pics=pics.substring(0,pics.length-1);
            this.model.pic=this.uploadList[0].url;
        },
        handleSuccess (res, file) {
            file.url=res.msg.url;
            file.name=res.msg.name;
            this.model.pic=res.msg.url;            
            this.pic=res.msg.url;    
            this.uploadList.push({name:file.name,url:file.url,uid:new Date().getSeconds()});
        },
        handlebannerSuccess(res,file){
            var vm=this;
                vm.model.bannerpic=res.msg.url;
        },
        handleFormatError (file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
            });
        },
        handleMaxSize (file) {
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
            });
        },
        handleBeforeUpload () {
            const check = this.uploadList.length < 5;
            if (!check) {
                this.$Notice.warning({
                    title: '最多只能上传 5 张图片。'
                });
            }
            return check;
        },
        save(){            
            var vm=this;            
            this.model.content=this.$refs.content.getUEContent();
            this.model.mcontent=this.$refs.mcontent.getUEContent();
            this.model.body=this.$refs.body.getUEContent();
            this.model.flag=this.flag.toString();
            var pics='';
            if(this.uploadList.length>0){
                for(var i in this.uploadList){
                    pics+=this.uploadList[i].url+',';
                }
                pics=pics.substring(0,pics.length-1);
                this.model.pic=this.uploadList[0].url;
                this.model.pics=pics;
            }
            else{
                this.model.pic='';
                this.model.pics='';
            }
            if(this.model.classid==undefined||this.model.classid==0){
                this.$Message.error("必须选择分类");
                return;
            }
            api.post("/xinxi/save",this.model).then(function(res){
                if(vm.model.ID>0)
                    vm.$Message.success("修改成功！");
                else                    
                    vm.$Message.success("添加成功！");
                    vm.$router.push({
                        name: 'content_article',
                        query: {}
                    });
            })
        },
        setmode(){
            if(this.mode=="PC"){
                this.ismobile=false;
            }
            else{
                this.ismobile=true;
            }
        },
        checkAllGroupChange(data){
        },
        getskinlist(callback){
            var vm=this;
            api.get("/skin/view.js").then(function(res){
                vm.viewlist=res.data;
            callback();
            })
        },
        getcategorys(callback){
            var vm=this;
            api.get("/category/gettree").then(function(res){            
                var clist=res.data.msg;
                vm.categorys=[];
                for(var item in clist){
                    vm.categorys.push(clist[item]);
                    if(clist[item].children.length>0){
                        var cchild=clist[item].children;
                        for(var citem in cchild){
                            cchild[citem].title="　|-"+cchild[citem].title;
                            vm.categorys.push(cchild[citem]);
                            if(cchild[citem].children.length>0){
                                var c2child=cchild[citem].children;                                
                                for(var c2item in c2child){
                                    c2child[c2item].title="　　|-"+c2child[c2item].title;
                                    vm.categorys.push(c2child[c2item]);
                                }
                            }
                        }
                    }
                }
                callback();
            })
        },
        getxinxi(callback){
            var id=this.$route.query.ID;
            var vm=this;
            api.post("/xinxi/getone/"+id+"?t="+new Date().getSeconds()).then(function(res){
                vm.model=res.data.msg;   
                vm.defaultList=[];
                vm.pic=res.data.msg.pic;
                var pics=[];
                if(res.data.msg.pics!=undefined){
                    pics=res.data.msg.pics.split(',');
                }
                for(var i in pics){
                    vm.defaultList.push({name:pics[i],url:pics[i]});
                }
                vm.$refs.upload.fileList=vm.defaultList;
                vm.uploadList = vm.$refs.upload.fileList;
                if(vm.model.flag==undefined){
                    vm.flag=[];
                }
                else{
                vm.flag=vm.model.flag.split(',');
                }
                if(vm.model.content==undefined){
                    vm.model.content="";
                }
                if(vm.model.mcontent==undefined){
                    vm.model.mcontent="";
                }
                if(vm.model.body==undefined){
                    vm.model.body="";
                }
                if(vm.model.bannerpic==undefined){
                    vm.model.bannerpic="";
                }
                delete  vm.model.sid;
                delete  vm.model.mid;   
                callback();
            })
        },
        init () {
            this.getskinlist(function(){});
            var vm=this;
            var id=this.$route.query.ID;
            if(id>0){
                this.pagename="编辑"; 
                vm.getcategorys(function(){
                    vm.getxinxi(
                        function(){
                            vm.$refs.content.ready(function() {                                
                                vm.$refs.content.setUEContent(vm.model.content);
                            })
                            vm.$refs.mcontent.ready(function() {
                                vm.$refs.mcontent.setUEContent(vm.model.mcontent);
                            })
                            vm.$refs.body.ready(function() {
                                vm.$refs.body.setUEContent(vm.model.body);
                            })
                    })
                });            
            }
            else{
                this.pagename="添加";    
                this.getcategorys(function(){
                vm.$nextTick(() => {
                    
                })});
            }
        }
    },
    mounted () {
        this.init();
        
    },
    watch: {
        '$route' () {
            this.init();
        }
    }
};
</script>
